<template>
  <div>
    <Modal
      v-model="downloadStore().modal"
      title="提示"
      :footer-hide="true"
      :mask-closable="false"
      @on-cancel="downloadModelCancel">
      <div class="downText">正在生成中，稍后请至下载中心下载。</div>
      <div class="downloadFooter">
        <Button type="info" @click="openList">打开下载中心</Button>
      </div>
    </Modal>
    <Modal
      v-model="downloadStore().modalList"
      title="下载中心"
      :footer-hide="true"
      width="80%"
      @on-cancel="downloadListCancel">
      <dt-search ref="searchRef"></dt-search>
      <dt-grid ref="gridRef" :onFetch="onFetch" page />
    </Modal>
  </div>
</template>
<script setup>
  import { downloadStore } from '@/store/download'
  import { onMounted, reactive, ref } from 'vue'
  import { columns } from '../opt/downloadColumns.js'
  import { searchOpt } from '../opt/downloadSearch.js'
  import apiOpt from '../biz/index.js'
  import file from '@/biz/file.js'
  import moment from 'moment'

  const [gridRef, searchRef] = [ref(), ref()]
  let infoData = reactive({
    startDate: moment(new Date()).startOf('month').format('YYYY-MM-DD'),
    endDate: moment(new Date()).endOf('month').format('YYYY-MM-DD')
  })
  function downloadModelCancel() {
    downloadStore().hide()
  }
  onMounted(() => {})

  const fn = {
    //下载
    downloadFn: (data) => {
      console.log(data)
      // file.downloadFile(data.path, data.name, true);
      const tmpFileName = data.path.split('/').pop()
      const urlPath = data.path.split(tmpFileName)[0]
      let urlPathload = urlPath + encodeURIComponent(tmpFileName)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = urlPathload
      link.setAttribute('download', `${data.name}`)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
  //打开列表页
  function openList() {
    console.log('openList')
    downloadStore().hide()
    downloadStore().showList()
    infoData.startDate = moment(new Date()).startOf('month').format('YYYY-MM-DD')
    infoData.endDate = moment(new Date()).endOf('month').format('YYYY-MM-DD')
    searchRef.value.init(gridRef.value, new searchOpt(), infoData)
    gridRef.value.init(new columns(fn))
    gridRef.value.fetch()
  }

  function downloadListCancel() {
    downloadStore().hideList()
  }

  function onFetch(opt) {
    return apiOpt.downloadlList(opt)
  }

  defineExpose({
    openList
  })
</script>
<style lang="scss" scoped>
  .downloadFooter {
    text-align: center;
  }

  .downText {
    text-align: center;
    padding: 50px 0;
  }

  .searchBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
